<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, target-densitydpi=320">
    <title>baicaijia</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/baicaijia.css"/>
</head>
<body>
<header class="header">
    <span class="arrow">
        <a href="javascript:;">
            <i></i>
        </a>
    </span>
    <div class="title">白菜价-淘宝内部券</div>
    <div class="download">
        <a href="javascript:;">
            <span></span>
            <p>APP下载</p>
        </a>
    </div>
</header>
<main class="bai_main">
    <!--<div class="bai_section">
        <a href="">
            <img src="https://gd2.alicdn.com/imgextra/i4/2559357181/TB2eYawX43X61Bjy0FlXXaGtVXa_!!2559357181.jpg_400x400.jpg">
        </a>
        <div class="bai_section_right">
            <div class="bai_title">
                <span class="b">[包邮]</span>
                藏源鹿品牌原创设计【羊毛针织】中长大衣
            </div>
            <div class="bai_price">
                <i>券后</i>
                <em>¥</em>
                106.0
                <del>¥206</del>
            </div>
            <div class="bai_linjuan">
                <div class="bar clearfix">
                    <a href="http://shop.m.taobao.com/shop/coupon.htm?seller_id=2213057944&amp;activity_id=8cfb336284b5436b9f2c7c9343fa85f1" class="goquan" target="_blank"></a><i><em style="width:75%;"></em><span>75%</span></i><b>已领75117张</b>
                </div>
            </div>
            <div class="bai_quan">
                <div>
                    <a href="http://shop.m.taobao.com/shop/coupon.htm?seller_id=2213057944&amp;activity_id=8cfb336284b5436b9f2c7c9343fa85f1" target="_blank">点此领10元优惠券</a>
                </div>
                <div>
                    <a biz-itemid="539735809040" isconvert="1" href="https://item.taobao.com/item.htm?id=539735809040" target="_blank">下单链接</a>
                </div>
            </div>
        </div>
    </div>-->
</main>
<footer class="bai_foot">
    <div class="bai_foot_top">
        <div><a href="javascript:;">登录</a></div>
        <div><a href="javascript:;">注册</a></div>
        <div class="brack"><a href="javascript:;">返回顶部</a></div>
    </div>
    <div class="bai_foot_bottom">
        <p><span>手机APP下载</span> <span>慢慢卖手机版</span>-掌上比价平台</p>
        <p>m.mai.buy.com</p>
    </div>
</footer>
<div class="up_fix">
    UP
</div>
<script src="js/template-native.js"></script>
<script src="../../lib/zepto/zepto.min.js"></script>
<script src="../../lib/zepto/selector.js"></script>
<!--<script src="../../lib/zepto/touch.js"></script>-->
<script src="../../lib/zepto/fx.js"></script>
<script src="js/zepot-nav.js"></script>
<script type="text/template" id="templateBai">
    <%for(var i = 0 ; i < items.length; i++){ %>
        <div class="bai_section">
            <a href="">
                <%=items[i].productImg%>
            </a>
            <div class="bai_section_right">
                <div class="bai_title"><%=items[i].productName%></div>
                <div class="bai_price"><%=items[i].productPrice%></div>
                <div class="bai_linjuan"><%=items[i].productCouponRemain%></div>
                <div class="bai_quan">
                    <div><%=items[i].productCoupon%></div>
                    <div><%=items[i].productHref%></div>
                </div>
            </div>
        </div>
    <% } %>
</script>
<script>
    $(function(){
        window.bodyWidth=$("body").width();//body的宽度；
//        console.log($("body").append('<div>nnnnnnnnnnnn</div>'))
//        console.log($("body").get(0))
        var Data=[
            {
                title:"全部",
                titleId:0
            },
            {
                title:"全部",
                titleId:1
            },
            {
                title:"全部",
                titleId:2
            },
            {
                title:"全部",
                titleId:3
            },
            {
                title:"全部",
                titleId:4
            },
            {
                title:"全部",
                titleId:5
            }
        ]

        window.num=0;
        $.fn.renderNav('.header',Data);
        //产品页面的初步渲染
        $.fn.product(num);
        $(window).on('scroll',function(){
            if($(window).scrollTop()>=44){
                $(".bai_nav").css({
                    'position':'fixed',
                    'top':'0px'
                })
                $('.bai_main').css('padding-top','44px');
//                console.log($(window).scrollTop())
            }else{
                $(".bai_nav").css({
                    'position':'relative',
                })
                $('.bai_main').css('padding-top','0px');
            }
            //点击返回顶部；
            if($(window).scrollTop()>($("body").height()*3/5)){
                $('.up_fix').css('display','block')
                $.fn.tap1('.up_fix',function(e){
                    goUpTop()
                })
//                console.log($("body").height())
//                console.log($(window).scrollTop())
            }
            else{
                $('.up_fix').css('display','none')
            }
        })
        //底部的点击返回
        $.fn.tap1('.brack',function(e){
            goUpTop()
        })
        function goUpTop(){
            var upTop=$(window).scrollTop()
            var time4=setInterval(function(){
                upTop*=0.8;
                if(upTop<=3){
                    upTop=0
                    clearInterval(time4);
                }
                $(window).scrollTop(upTop)
            },10)
        }



    })
//    var somes=document.getElementsByTagName("*")
//    console.log(somes)
//    for(var i =0 ;i<somes.length;i++){
//        somes[i].onscroll=function(e){
//            console.log(1)
//            console.log(e.target);
//        }
//    }
</script>
</body>
</html>
<!--* 中间的内容部分的每一页的内容都采用模块化的方法独立开发每一个模块的方式添加进body里面-->
<!--*nav当页面滚动的时候为固定定位；-->
<!--*红色线条的宽度动态获取；-->
<!--*红色线条的透明外盒子和当前li的宽度一直；红色内盒子的宽度与当前li的a的宽度一致-->